<template>
  <view class="content">
      <view
        class="selected"
        v-for="(item, index) in MerchantList"
        @click="handleCheck(index)"
      >
        <image class="selected_icon" v-if="item.logo" :src="JSON.parse(item.logo)[0]"></image>
        <view class="selected_content">
          <view class="selected_content_row1">{{ item.name }}</view>
          <!-- <view class="selected_content_row2">手续费：{{ (item.commission_rate * 100).toFixed(2) }}%</view> -->
          <view class="selected_content_row2">手续费：10%</view>
        </view>

        <image
          v-if="now_check == index"
          class="selected_checked"
          src="../../static/Selected.png"
        ></image>
        <image
          v-else
          class="selected_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

    <view class="fixed">
      <view class="fixed_button" @click="handleConfirm">确定</view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
export default {
  data() {
    return {
      MerchantList: [],
      now_check: 0,
    };
  },
  onShow() {
    this.MerchantSelect = uni.getStorageSync("MerchantSelect");
    this.getCommissionprice();

  },
  methods: {
    
    handleCheck(index) {
      //   this.MerchantList.forEach((x, i) => {
      //     if (i == index) {
      //       x.check = true;
      //     } else {
      //       x.check = false;
      //     }
      //   });

      this.now_check = index;
      this.$forceUpdate();
    },

    async getCommissionprice() {
      let res = await api.linkedMerchantList({
        method: "get",
        // loading: "加载中",
      });
      if (res.code == 0) {
        this.MerchantList = res.data;
        if (this.MerchantSelect) {
          this.MerchantList.filter((x, i) => {
            if (x.id == this.MerchantSelect.id) {
              this.now_check = i;
            }
          });
        }
      } else {
        tip.defaults(res.msg);
      }
    },

    handleConfirm() {
      if (this.MerchantList.length == 0) {
        tip.defaults("暂无商家可选");
      }
      uni.setStorageSync("MerchantSelect", this.MerchantList[this.now_check]);

      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 30rpx 30rpx 100rpx 30rpx;
  background: $bg-color1;
  min-height: 100vh;
}
.selected {
  position: relative;
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  padding: 20rpx;
  width: 690rpx;
  height: 160rpx;
  background: #292b2b;
  border-radius: 24rpx;
  &_icon {
    width: 120rpx;
    height: 120rpx;
    background: #4E4E4F;
    border-radius: 16rpx;
  }
  &_content {
    margin-left: 28rpx;
    &_row1 {
      // width: 256rpx;
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;
    }
    &_row2 {
      margin-top: 16rpx;

      // width: 182rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #1fe7e7;
      line-height: 40rpx;
    }
  }
  &_checked {
    position: absolute;
    right: 30rpx;
    bottom: 62rpx;
    width: 40rpx;
    height: 40rpx;
  }
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  width: 750rpx;
  height: 130rpx;
  background: #292b2b;
  &_button {
    width: 670rpx;
    height: 90rpx;
    margin: 20rpx auto 0;
    background: $button;
    background-repeat: no-repeat;
    background-size: 100%;

    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 90rpx;
    text-align: center;
  }
}
</style>